<template>
    <div class="mine">
        <div class="common-header">
            <common-header></common-header>
        </div>
        <div class="mine-main">
            <div class="cont">
                <div class="c-left">
                    <common-left-menu></common-left-menu>
                </div>
                <div class="c-right">
                    <router-view></router-view>
                </div>
            </div>
        </div>
        <div class="common-footer">
            <common-footer></common-footer>
        </div>
    </div>
</template>

<script>
import CommonHeader from "../components/CommonHeader";
import CommonFooter from "../components/CommonFooter";
import CommonLeftMenu from "../components/CommonLeftMenu";
export default {
    components: {
        CommonHeader,
        CommonFooter,
        CommonLeftMenu
    },
};
</script>

<style lang="less" scoped>
.mine{
    background:#FFFFFF;
    .common-header{
        width:100%;
        margin-bottom:10px;
        box-shadow:0 5px 10px 0px rgba(0,0,0,0.01);
    }
    .mine-main{
        width:100%;
        padding:40px 0px;
        .cont{
            width:@max-width;
            margin:0 auto;
            display:flex;
            justify-content:space-between;
            border-radius:10px;
            overflow:hidden;
            box-shadow:0 4px 10px 2px rgba(0,0,0,0.1);
            .c-left{
                width:240px;
                height:100%;
            }
            .c-right{
                width:calc(@max-width - 240px);
            }
        }
    }
    .common-footer{

    }
}
</style>